<template>

    <div class="app-container">

        <query-role :select-ids="ids" :total="responseResult.total" @send-query="handleQuery" @send-open-add-dialog="openAddDialog">
            <template #table>
                <el-table ref="dataTableRef" v-loading="loading" :data="responseResult.records" highlight-current-row border
                          row-key="id"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column label="ID" prop="id" width="100"/>
                    <el-table-column label="角色名称" prop="name" min-width="100"/>
                    <el-table-column label="权限" prop="permission_names" min-width="200"/>
                    <el-table-column label="创建时间" prop="created_at" min-width="120"/>
                    <el-table-column label="备注" prop="beizhu" min-width="100"/>
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="scope">
                            <el-button type="primary" size="small" link @click="handleEdit(scope.row)">
                                编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </query-role>


        <AddRoleDialog :record="record" v-model:drawer="isShowAddDialog" :title="'新增角色'" @send-query="handleQuery" ></AddRoleDialog>

    </div>
</template>

<script setup lang='ts' name="Role">
import AddRoleDialog from './components/AddRoleDialog.vue';
import {QueryParamsRoleInter, RoleRecordInter} from "@/types/rbac";
import useRole from "@/hooks/rbac/useRole";
const {responseResult,loading,getRecords} = useRole()

let isShowAddDialog = ref(false)
let dataTableRef = ref()
let ids = ref<number[]>([])
let record = ref<RoleRecordInter>({id:0,name:'',beizhu:'',permission_ids:''})
function handleEdit(params: any) {
    record.value.id = params.id
    record.value.name = params.name
    record.value.beizhu = params.beizhu
    record.value.permission_ids = params.permission_ids
    isShowAddDialog.value = true
}

function openAddDialog() {
    isShowAddDialog.value = true
}

//接收查询条件
function handleQuery(query?: QueryParamsRoleInter) {
    getRecords(query)
}

function handleSelectionChange(rows: any[]) {
    ids.value = []
    rows.forEach(row=>{
        ids.value.push(row.id)
    })
}

onMounted(() => {
    getRecords()
})

</script>

<style></style>
